/*
 *  Copyright 2025 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
@import (reference) '../../../styles/variables.less';
.description-section {
  margin-top: 12px;
  padding-left: 14px;
  padding-right: 14px;
  border-bottom: 0.6px solid @grey-15;
  padding-bottom: 16px;
  .block-editor-wrapper .tiptap.ProseMirror {
    font-size: 12px;
    font-weight: 400;
  }
  .description-header {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;

    .description-title {
      font-weight: 600;
      font-size: 13px;
      color: @grey-900;
    }
  }

  .description-content {
    .description-display {
      .description-text {
        &.expanded {
          display: block;
          line-height: 1.4;
        }

        &.collapsed {
          .rich-text-editor-container {
            .markdown-parser {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              max-height: 2.8em; /* 2 lines * 1.4 line-height */
              font-size: 14px;
              word-wrap: break-word;
              word-break: break-word;
              white-space: normal;
            }
          }
        }
      }

      .show-more-button {
        background: none;
        border: none;
        color: @primary-color;
        cursor: pointer;
        font-size: 12px;
        padding: 0;
        text-decoration: none;
        transition: color 0.2s ease;

        &:hover {
          color: @primary-6;
          text-decoration: underline;
        }

        &:focus {
          outline: none;
          color: @primary-6;
        }
      }
    }

    .no-data-placeholder {
      color: @grey-500;
      font-size: 12px;
    }
  }
}
